<html lang="en" xmlns:ext="http://www.sencha.com/docs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ext JS 3.3.1 API Documentation</title>

<meta name="description" content="API Documentation for Ext JS - a cross-browser JavaScript framework for building rich internet applications." />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="resources/docs.css" />
<link rel="stylesheet" type="text/css" href="resources/style.css" />    
<link rel="shortcut icon" href="resources/favicon.ico" />
<link rel="icon" href="resources/favicon.ico" />
<style type="text/css"></style>
<!-- GC -->
<script type="text/javascript" src="resources/ext-base.js"></script>
<script type="text/javascript" src="resources/ext-all.js"></script>
<script type="text/javascript" src="resources/TabCloseMenu.js"></script>



<link rel='stylesheet' type='text/css' href='style-table.css' />
<link type="text/css" href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="jquery/jquery-validate/jquery.validate.min.js"></script>



<!-- EXT Library -->
        
        <script type="text/javascript" src="ext3.3.1/examples/ux/TableGrid.js"></script>
        <link rel="stylesheet" type="text/css" href="ext3.3.1/examples/grid/grid-examples.css" />


        <style type="text/css">
        #the-table { border:1px solid #bbb;border-collapse:collapse; }
        #the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
		
		
		.table-header {
	color:black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFD0;
	height: 30px;
}


/********FIELDSET  LEGEND*****************/

.form-select select {
   width: 100%;
   padding: 5px;
   border: 1px solid #ccc;
   height: 30px;
}
fieldset {
background-color: #E3EEF7;
margin-top: 5px;
margin-bottom: 5px;
padding: 6px 6px;
border: solid 1px #ffa20c;
border-radius: 8px;
align:center
}

legend {
background: #ffa20c;
border: solid 1px black;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
padding: 6px;
height : 10px;
}



.tableRow {
	background-color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	color: #000000;
	font-size: 12px;
	padding: 1px 1px 1px 1px;

}

.tableRow { background-color: #fff; }



.tableCellHeader {

	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFD0;
	background-image: url(images/grad.jpg);
	height: 50px;
}



.tableCell:hover { 
	background-color: #FFFFD0;
	cursor: pointer;
 }
 
.cellDirty {

	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFD0;
	height: 50px;
}



.cellDirty:hover { 
	background-color: #FFFFD0;
	cursor: pointer;
 }
 
.cellEdit {

	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background-color: #C0C0C0;
	height: 50px;
}


</style>

<script>
var win;
function addThoiKhoaBieuFormJS(cell,ngayId, tietId, monHocId)
{
	//	alert("ngay : " + ngayId + " tiet : " + tietId);
	//	jQuery('#div1').toggle();
	
	//jQuery("#" + cell.id).css('backgroundColor', '#C0C0C0');
		Ext.get(cell).removeClass('tableCell');
		Ext.get(cell).addClass('cellEdit');
	
var login = new Ext.FormPanel({ 
        labelWidth:80,
        url:'saveThoiKhoaBieu.action', 
        frame:true, 
        title:'Môn học', 
        defaultType:'textfield',
		
	monitorValid:true,
	// Specific attributes for the text fields for username / password. 
	// The "name" attribute defines the name of variables sent to the server.
        items:[{ 
                fieldLabel:'Lớp', 
                name:'lopId', 
                allowBlank:false ,
				value : jQuery("#" + cell.id).html().trim(),
            },
			
			{ 
                fieldLabel:'Số tiết', 
                name:'soTietHoc', 
                inputType:'number', 
                allowBlank:false 
            }],
 
	// All the magic happens after the user clicks the button     
        buttons:[
			{ 
                text:'Lưu',
                formBind: true,	 
                // Function that fires when user clicks the button 
                handler:function(){ 

					win.hide();
					jQuery("#" + cell.id).html(login.items.items[0].getEl().getValue() );
					//jQuery("#" + cell.id).css('backgroundColor', '#FFFFD0');
					Ext.get(cell).removeClass('cellEdit');
					Ext.get(cell).addClass('cellDirty');

                    /*login.getForm().submit({ 
                        method:'POST', 
                        waitTitle:'Connecting', 
                        waitMsg:'Sending data...',
 
			// Functions that fire (success or failure) when the server responds. 
			// The one that executes is determined by the 
			// response that comes from login.asp as seen below. The server would 
			// actually respond with valid JSON, 
			// something like: response.write "{ success: true}" or 
			// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
			// depending on the logic contained within your server script.
			// If a success occurs, the user is notified with an alert messagebox, 
			// and when they click "OK", they are redirected to whatever page
			// you define as redirect. 
 
                        success:function(){ 
                        	Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
								if (btn == 'ok'){
									var redirect = 'home.action'; 
									window.location = redirect;
								}
							});
                        },
 
			// Failure function, see comment above re: success and failure. 
			// You can see here, if login fails, it throws a messagebox
			// at the user telling him / her as much.  
 
                        failure:function(form, action){ 
                            if(action.failureType == 'server'){ 
                                obj = Ext.util.JSON.decode(action.response.responseText); 
                                Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                            }else{ 
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                            } 
                            login.getForm().reset(); 
							window.location = redirect;
                        } 
                    }); */
                } 
            }
			,
			{ 
                text:'Hủy', 
                // Function that fires when user clicks the button 
					handler:function(){ 
						win.hide();
					}
			}
		] 
    });
 
 
	// This just creates a window to wrap the login form. 
	// The login object is passed to the items collection.  
	
	if(win) win.destroy();
	
	//align right cell
	var x = Ext.get(cell).getX() + cell.offsetWidth;
	var y = Ext.get(cell).getY() + cell.offsetHeight;
	
	if(x + 300 > document.body.offsetWidth)
		x = Ext.get(cell).getX() - 300;
	if(y + 170 > document.body.offsetHeight)
		y = Ext.get(cell).getY() - 170;
	//align center
//	var x = Ext.get(cell).getX() ;
//	var y = Ext.get(cell).getY() ;

    win = new Ext.Window({
        layout:'fit',
        width:300,
        height:170,
        closable: true,
        resizable: false,
		draggable : false,
        plain: true,
        border: false,
		modal : false,
		animateTarget : Ext.get(cell),
		x: 	x,
		y:	y,
        items: [login],
		//animation
		animShowCfg: {
			duration: 0.25,
			easing : 'easeOut',
			opacity : 1
		},
		animHideCfg: {
			duration: 0.25,
			easing : 'easeOut',
			opacity : 1
		}
		,
		//listener
		listeners: { 
			beforeHide: function(){
				//jQuery("#" + cell.id).css('backgroundColor', '#FFFFFF');
				Ext.get(cell).removeClass('cellEdit');
				Ext.get(cell).addClass('tableCell');
			}
		}
	});

	win.show();
		
}

Ext.onReady(function(){ 
	Ext.override(Ext.Window, {
		defaultAnimShowCfg: {
			duration: .25,
			easing: 'easeNone',
			opacity: .5
		},
		defaultAnimHideCfg: {
			duration: .25,
			easing: 'easeNone',
			opacity: .5
		},
		animShow : function(){
			this.proxy.show();
			this.proxy.setBox(this.animateTarget.getBox());
			this.proxy.setOpacity(.5);
			var b = this.getBox(false);
			b.callback = this.afterShow;
			b.scope = this;
			b.block = true;
			Ext.apply(b, this.animShowCfg, this.defaultAnimShowCfg);
			//this.el.setStyle('display', 'none');
			this.proxy.shift(b);
		},
		animHide : function(){
			this.proxy.setOpacity(.5);
			this.proxy.show();
			var tb = this.getBox(false);
			this.proxy.setBox(tb);
			this.el.hide();
			var b = this.animateTarget.getBox();
			b.callback = this.afterHide;
			b.scope = this;
			b.block = true;
			Ext.apply(b, this.animHideCfg, this.defaultAnimHideCfg);
			this.proxy.shift(b);
		}
	});
});
</script>
</head>
<body >

<fieldset>
	<div>
		<table cellspacing="2" id="thoiKhoaBieuPhongTable" width='100%'> 
			<thead> 
				<tr class='table-header' >  
					<th></th> 
					<th>Thứ 2</th> 
					<th>Thứ 3 </th> 
					<th>Thứ 4 </th>
					<th>Thứ 5 </th>
					<th>Thứ 6 </th>
					<th>Thứ 7 </th>
					<th>Chủ Nhật </th>
				</tr> 
			</thead> 
			<tbody> 
				<tr class='tableRow' height="20"> 
					<td class="tableCellHeader">Tiết 1 </td>
						<td id='2' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);">
							
						</td>
						<td  id='3' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='4' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='5' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='6' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='7' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='cn' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td  class="tableCellHeader">Tiết 2 </td>
						<td id='2' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this, this.id,2, 0);"></td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 3 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 4 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 5 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 6 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 7 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 8 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 9 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 10 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 11 </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
				<tr class='tableRow' > 
					<td class="tableCellHeader">Tiết 12 </td>
						<td id='2' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);">
							
						</td>
						<td  id='3' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='4' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='5' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='6' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='7' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
						<td  id='cn' class="tableCell" onDblClick="addThoiKhoaBieuFormJS(this,this.id,1, 0);"> </td>
				</tr>
			</tbody>
		</table>
		
	</div>
</fieldset>
</body>
</html>
